/**
 * 流程图
 */
import React from "react";
import ReactFlow, { Node, Edge, Position, MarkerType } from "reactflow";
import { TData } from "./interface";
import CustomNode from "./CustomNode";
import useStyles from "./style";
import "reactflow/dist/style.css";

const nodeTypes = {
  customNode: CustomNode
};
const FlowChart: React.FC = () => {
  const styles = useStyles();
  const initialNodes: Node<TData>[] = [
    {
      id: "A",
      position: { x: 0, y: 80 },
      type: "input",
      sourcePosition: Position.Right,
      data: { label: "混凝土开仓" },
      style: { backgroundColor: "green" }
    },
    {
      id: "B",
      position: { x: 250, y: 80 },
      targetPosition: Position.Left,
      sourcePosition: Position.Right,
      data: { label: "施工自检" }
    },
    {
      id: "C",
      position: { x: 500, y: 80 },
      type: "customNode",
      className: styles.customNode,
      data: {
        label: "工序/单元评定",
        rightObj: { show: true, type: "source" },
        topObj: { show: true, type: "source" },
        leftObj: {
          show: true,
          type: "target"
        }
      }
    },
    {
      id: "D",
      position: { x: 750, y: 80 },
      targetPosition: Position.Left,
      sourcePosition: Position.Right,
      data: { label: "监理抽验" }
    },
    {
      id: "E",
      position: { x: 1000, y: 80 },
      targetPosition: Position.Left,
      sourcePosition: Position.Right,
      data: { label: "重要隐蔽/关键部位质量等级评定" }
    },
    {
      id: "F",
      position: { x: 1250, y: 80 },
      type: "customNode",
      className: styles.customNode,
      data: {
        label: "工序/单元报验",
        topObj: { show: true, type: "target" },
        leftObj: {
          show: true,
          type: "target"
        }
      }
    }
  ];

  const initialEdges: Edge[] = [
    {
      id: "A-B",
      source: "A",
      target: "B",
      markerEnd: { type: MarkerType.ArrowClosed, width: 15, height: 15, color: "#ff0072" },
      style: {
        strokeWidth: 2,
        stroke: "#ff0072",
        strokeDasharray: 5
      }
    },
    {
      id: "B-C",
      source: "B",
      target: "C",
      markerEnd: { type: MarkerType.ArrowClosed, width: 15, height: 15, color: "#ff0072" },
      style: {
        strokeWidth: 2,
        stroke: "#ff0072"
      }
    },
    {
      id: "C-D",
      source: "C",
      target: "D",
      sourceHandle: "right-C",
      markerEnd: { type: MarkerType.ArrowClosed, width: 15, height: 15, color: "#000" },
      style: {
        strokeWidth: 2,
        stroke: "#000",
        strokeDasharray: 5
      }
    },
    {
      id: "D-E",
      source: "D",
      target: "E",
      markerEnd: { type: MarkerType.ArrowClosed, width: 15, height: 15, color: "#000" },
      style: {
        strokeWidth: 2,
        stroke: "#000",
        strokeDasharray: 5
      }
    },
    {
      id: "E-F",
      source: "E",
      target: "F",
      markerEnd: { type: MarkerType.ArrowClosed, width: 15, height: 15, color: "#000" },
      style: {
        strokeWidth: 2,
        stroke: "#000",
        strokeDasharray: 5
      }
    },
    {
      id: "C-F",
      source: "C",
      target: "F",
      type: "smoothstep",
      sourceHandle: "top-C",
      targetHandle: "top-F",
      markerEnd: { type: MarkerType.ArrowClosed, width: 15, height: 15, color: "#000" },
      style: {
        strokeWidth: 2,
        stroke: "#000"
      }
    }
  ];

  // Node点击事件
  const onNodeClick = (event: React.MouseEvent, node: Node) => {
    console.log({ event, node });
  };

  return (
    <>
      <h3>流程图</h3>
      <div className={styles.flowChart}>
        <ReactFlow
          nodes={initialNodes}
          edges={initialEdges}
          panOnDrag={false}
          preventScrolling={false}
          nodesDraggable={false}
          nodesConnectable={false}
          zoomOnDoubleClick={false}
          onNodeClick={onNodeClick}
          nodeTypes={nodeTypes}
        />
      </div>
    </>
  );
};
export default FlowChart;
